<template>
    <div class="home">
        <div class="mask">
        	<el-row>
        		<el-col :span="12">
        			<div class="get-start">
		        		<img src="/img/home-text.png" alt="开启创意之旅" width="320">
		        		<p class="intro">成都聚象文化传媒有限公司是专注于为客户提供专业视频制作、 微博自媒体及全网视频平台营销、 品牌IP及红人打造的传媒、营销、经纪一体化公司</p>
		        		<el-button class="get-start-btn" size="medium" round>GET STARTED</el-button>
        			</div>
        		</el-col>
        	</el-row>
        </div>
        <div class="volume">
        	<img :src="volume != 0 ? '/img/volume.png' : '/img/mute.png'" alt="" class="vol-icon" @click="setVolume">
		</div>
        <video ref="video" src="http://media.filmwhite.com/20180517002817966.mp4" autoplay loop class="video-box" poster="http://www.filmwhite.com/IMG/bg.jpg"></video>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
        	videoTarget: null,
        	volume: 100
        }
    },
    mounted: function() {
    	this.videoTarget = this.$refs.video;
    },
    methods: {
    	setVolume: function(){
    		this.videoTarget.volume = (this.videoTarget.volume == 0 ?  1 : 0);
    		this.volume = this.videoTarget.volume;
    	}
    }
}

</script>
<style scoped>
.home{
    height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
}
.mask{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	position: absolute;
	z-index: 2;
}
.video-box{
	display: block;
	width: 100%;
	position: absolute;
	z-index: 1;
	top: -185px;
}
.get-start{
	color: #fff;
	margin: 80px 40px;
}
.intro{
	font-size: 24px;
	line-height: 1.5;
	margin-top: 30px;
}
.volume{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	height: 24px;
	line-height: 24px;
}
.vol-icon{
	height: 24px;
	vertical-align: middle;
	cursor: pointer;
}
.get-start-btn{
	width: 200px;
	font-size: 18px;
	margin-top: 20px;
}
</style>
